<template>
	<view class="mph100">
		<view class="res_content">
			<view class="h180 flex_aj"><image src="/static/ic_cg_2x.png" mode="widthFix" style="width: 80rpx;"></image></view>
			<view class="thick_line"></view>
			
		</view>
		<view class="res_info mb100 pb30">
			<view class="top_shadow"></view>
			<view class="mlr30 pb30 bdb-dashed tac"><view class="ft32  c0 lh80">套餐购买成功</view></view>
			<view class="plr30 pt20">
				<view class="h80 flex_sb">
					<text class="<c6></c6>">管理商家</text>
					<text>东莞小型车辆运营公司</text>
				</view>
				<view class="h80 flex_sb">
					<text class="c6">租赁时间</text>
					<text>2020-06-06 10:10:12</text>
				</view>
				<view class="h80 flex_sb">
					<text class="c6">租用时长</text>
					<text>6 个月</text>
				</view>
				<view class="h80 flex_sb">
					<text class="c6">换电次数</text>
					<text>60 次</text>
				</view>
				<view class="h80 flex_sb">
					<text class="c6">结束时间</text>
					<text>2020-06-06 10:10:12</text>
				</view>
			</view>
		</view>
		<view class="plr100 mb30"><u-button type="primary" shape="circle">开始换电</u-button></view>
	</view>
</template>

<script>
export default {
	data() {
		return {}
	},
	methods: {}
}
</script>

<style lang="scss" scoped>
.res_content {
	position: relative;
	height: 300upx;
	background-color: $primary;
	.h180 {
		height: 200upx;
	}
	.thick_line {
		width: 702upx;
		height: 20upx;
		margin: 0 auto;
		background-color: $primaryActive;
		border-radius: 10upx;
	}

}
	.res_info {
		position: relative;
		top: -90upx;
		left: 42upx;
		width: 662upx;
		background-color: #ffffff;
		min-height: 466upx;
		box-sizing: border-box;
		box-shadow: 0px 3px 7px 0px rgba(4, 0, 0, 0.1);
		border-radius: 0px 0px 14px 14px;
		.top_shadow {
			height: 1upx;
			width: 100%;
			background-color: $primaryActive;
			box-shadow: 0px 2px 16px 6px $primaryActive;
			margin-bottom: 40upx;
		}
		.lh80 {
			line-height: 80upx;
		}
		.bdb-dashed {
			border-bottom: 2px dashed #f5f5f5;
		}
	}
</style>
